<!DOCTYPE html>
<html>
<head>
    <title>Bungee Jumping Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas id="bungeeCanvas" width="600" height="700"></canvas>
    <script>
        const canvas = document.getElementById('bungeeCanvas');
        const ctx = canvas.getContext('2d');

        // Clear canvas with a white background
        ctx.fillStyle = 'white';
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        // Set common drawing styles
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 3;
        ctx.lineCap = 'round';
        ctx.lineJoin = 'round';

        // --- 1. Draw the Structure (Platform and Cliff) ---
        const platformX = 150;
        const platformY = 150;
        const platformWidth = 300;
        const platformHeight = 50;

        // Cliff
        ctx.fillRect(platformX + platformWidth, platformY, 100, 550);

        // Platform
        ctx.strokeRect(platformX, platformY, platformWidth, platformHeight);

        // --- 2. Draw the Jumper ---
        const jumperHipX = 225;
        const jumperHipY = 135;

        // Body (torso)
        ctx.beginPath();
        ctx.moveTo(jumperHipX, jumperHipY);
        ctx.quadraticCurveTo(205, 100, 195, 85); // Curved back
        ctx.stroke();

        // Head
        ctx.beginPath();
        ctx.arc(190, 65, 15, 0, 2 * Math.PI);
        ctx.fill();

        // Arms
        ctx.beginPath();
        ctx.moveTo(205, 110); // Shoulder area
        ctx.lineTo(260, 100);  // Forward arm
        ctx.moveTo(205, 110);
        ctx.lineTo(165, 120);  // Back arm
        ctx.stroke();
        
        // Legs (crouched)
        ctx.beginPath();
        ctx.moveTo(jumperHipX, jumperHipY);
        ctx.lineTo(240, 140); // Thigh
        ctx.lineTo(250, 150); // Shin to foot on platform
        ctx.stroke();

        // Bungee Cord (loose)
        ctx.beginPath();
        ctx.moveTo(jumperHipX - 5, jumperHipY); // Attached near the hip
        ctx.bezierCurveTo(160, 180, 160, 280, 190, 270);
        ctx.stroke();

        // --- 3. Draw Path, Points, and Labels ---
        const pathX = 270;

        // Label 'O'
        ctx.font = 'italic bold 28px serif';
        ctx.fillText('O', pathX + 10, platformY + 35);
        
        // Vertical line inside platform indicating attachment point alignment
        ctx.beginPath();
        ctx.moveTo(pathX, platformY);
        ctx.lineTo(pathX, platformY + platformHeight);
        ctx.stroke();

        // Dashed line for the path
        ctx.beginPath();
        ctx.setLineDash([6, 6]);
        ctx.moveTo(pathX, platformY + platformHeight);
        ctx.lineTo(pathX, 600);
        ctx.stroke();
        ctx.setLineDash([]); // Reset to solid line

        // Points A, B, C
        ctx.font = 'italic 28px serif';
        const pointRadius = 6;

        // Point A
        const pointAY = 300;
        ctx.beginPath();
        ctx.arc(pathX, pointAY, pointRadius, 0, 2 * Math.PI);
        ctx.fill();
        ctx.fillText('A', pathX + 20, pointAY + 10);

        // Point B
        const pointBY = 400;
        ctx.beginPath();
        ctx.arc(pathX, pointBY, pointRadius, 0, 2 * Math.PI);
        ctx.fill();
        ctx.fillText('B', pathX + 20, pointBY + 10);
        
        // Point C
        const pointCY = 520;
        ctx.beginPath();
        ctx.arc(pathX, pointCY, pointRadius, 0, 2 * Math.PI);
        ctx.fill();
        ctx.fillText('C', pathX + 20, pointCY + 10);

    </script>
</body>
</html>